<template>
	<div class="app-container meeting-container">
		<div class="leftbox">
			<p class="listtitle">成员列表</p>
			<el-card class="box-card" shadow="never" style="height: calc(100% - 64px);overflow: auto;">
				<el-tree class="filter-tree" :check-on-click-node="true" :default-expand-all="false" :data="treelist" :props="defaultProps" node-key="id" check-strictly ref="tree" @check-change="handleCheckChange" show-checkbox>
					<span slot-scope="{ node }">
	      			<!--<el-image style="width: 24px; height: 24px" src="../../../assets/images/person.png" fit="contain"></el-image>-->
				   		<span style="padding-left: 5px;float: left;line-height: 24px;" :title="node.label">{{node.label}}</span>
					</span>
				</el-tree>
			</el-card>
		</div>
		<div class="rightbox">
			<p style="height: 50px;line-height: 50px;font-size: 20px;margin: 0;width: 73%;display: inline-block;">会议成员</p>
			<el-input v-model="topic" id="topic" suffix-icon="el-icon-menu" placeholder="请输入主题" style="display: inline-block;width: 180px;margin-right: 10px;"></el-input>
			<el-button type="primary" v-on:click="savemeet">开始会议</el-button>
			<el-row style="height: 80%;overflow: auto;">
				<el-col :span="6" v-for="(item, index) in treesellist" :key="item.id" style="margin-left: 5%;margin-top: 20px;">
					<el-card :body-style="{ padding: '0px' }">
						<div v-if="item.name !== undefined" style="padding: 14px;">
							<span>{{ item.name }}</span>
							<div class="bottom clearfix">
								<time class="time">{{ item.phone }}</time>
								<el-button type="text" class="button" v-on:click="delperson(item)">删除</el-button>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<el-dialog title="会议中" :visible.sync="dialogFormVisible">
		  <div style="width: 100%;height: calc(100% - 110px);position: relative;">
				<div class="meetingtable">
					<!--在线-->
					<div v-for="item in personlist" :key="item.uuid" class="participants" v-on:mouseenter="enter($event)" v-on:mouseleave="leave($event)" style="background: #ccc;width: 50px;height: 50px;border-radius: 25px;cursor: pointer;">
						<div style="position: absolute;top: 4px;left: 8px;">
							<span class="inMeeting" v-if="item.typ == 'inMeeting' && item.member_number.length > 5"></span>
							<span class="calling" v-if="item.typ == 'calling' && item.member_number.length > 5"></span>
							<span class="beInvited" v-if="item.typ == 'beInvited' && item.member_number.length > 5"></span>
							<span class="beCancel" v-if="item.typ == 'beCancel' && item.member_number.length > 5"></span>
							<span class="beMute" v-if="item.typ == 'beMute' && item.member_number.length > 5"></span>
							<span class="outMeeting" v-if="item.typ == 'outMeeting' && item.member_number.length > 5"></span>
							<span class="elseimg" v-if="item.member_number.length < 5"></span>
						</div>
						<p style="position: absolute;top: 29px;left: -25px;height: 50px;line-height: 50px;width: 105px;text-align: center;">{{item.name}}</p>
						<p style="position: absolute;top: 50px;left: -25px;height: 50px;line-height: 50px;width: 105px;text-align: center;">{{item.member_number}}</p>
						<div class="operation hide" style="position: absolute;top: -45px;left: -18px;width: 90px;height: 100px;">
							<el-row>
								<el-button v-if="item.typ == 'beMute' && item.typ !== 'outMeeting'" title="恢复" v-on:click="meetings(item.member_number,'unmute')" size="medium" type="warning" icon="feather iconfont icon-huifu" circle></el-button>
								<el-button v-if="item.typ !== 'beMute' && item.typ !== 'outMeeting'" title="禁言" v-on:click="meetings(item.member_number,'mute')" size="medium" type="warning" icon="feather iconfont icon-jinyan" circle></el-button>
								<el-button v-if="item.typ !== 'outMeeting'" title="踢出" v-on:click="meetings(item.member_number,'kick')" size="medium" type="danger" icon="feather iconfont icon-yichu1" circle></el-button>
							</el-row>
						</div>
					</div>
				</div>
				<div class="addperson" style="width: 200px;height: 50px;cursor: pointer;position: absolute;top: 30px;right: 36px;">
					<div class="demo-input-suffix" style="position: absolute;top: -45px;left: -18px;width: 100%;height: 60px;">
						<el-input v-model="tel" id="tel" placeholder="添加新成员" style=""><i v-on:click="addperson" slot="suffix" class="feather el-icon-plus" style="line-height: 40px;padding-right: 10px;font-size: 18px;"></i></el-input>
					</div>
				</div>
			</div>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="endmeet">关闭会议</el-button>
		  </div>
		</el-dialog>

		<div id="cover" v-show="show1"></div>
	</div>
</template>
<style>
	.hide {
		display: none;
	}
	
	.participants {
		position: absolute;
	}
	#cover {
		position: absolute;
		left: 0px;
		top: 0px;
		background: rgba(0, 0, 0, 0.6);
		width: 100%;
		/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
		height: 820px;
		filter: alpha(opacity=60);
		/*设置透明度为60%*/
		opacity: 0.6;
		/*非IE浏览器下设置透明度为60%*/
		z-Index: 999;
	}
	.meetingtable{
		background-image: url('../../../assets/images/ting.png');background-size: 100% 154px;width: 300px;height: 150px;border-radius: 75px;position: absolute;top:55%;left:50%;transform: translate(-50%, -50%)
	}
	.inMeeting{
		background-image: url('../../../assets/images/per.png');background-size: 100% 100%;width: 36px;height: 42px;display: inline-block;
	}
	.calling{
		background-image: url('../../../assets/images/dian.png');background-size: 100% 100%;width: 36px;height: 42px;display: inline-block;
	}
	.beCancel{
		background-image: url('../../../assets/images/1.png');background-size: 100% 100%;width: 36px;height: 42px;display: inline-block;
	}
	.beMute{
		background-image: url('../../../assets/images/6.png');background-size: 100% 100%;width: 36px;height: 42px;display: inline-block;
	}
	.outMeeting{
		background-image: url('../../../assets/images/5.png');background-size: 100% 100%;width: 36px;height: 42px;display: inline-block;
	}
	.elseimg{
		background-image: url('../../../assets/images/zj.png');background-size: 100% 100%;width: 36px;height: 42px;display: inline-block;
	}
	.el-button--medium.is-circle {
    padding: 7px;
	}
</style>
<script>
	import { closeConferences, startConferences, getConferencesMember, joinConferences, oprConferences } from "@/api/call/meetinglist";
	import { getPersonTree } from "@/api/person/person";	
	import { getExtension } from "@/api/call/extension"
	import $ from 'jquery'
	export default {
		name: "Online",
		data() {
			return {
				// 遮罩层
				loading: true,
				open: false,
				treelist: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				topic: '',
				treesellist: [],
				extensionlist: [],
				uuid: '',
				show1: false,
				dialogFormVisible: false,
				personlist: [{
					member_number: '015738779653',
					typ: 'inMeeting'
				},{
					member_number: '015738779653',
					typ: 'calling'
				},{
					member_number: '015738779653',
					typ: 'beCancel'
				},{
					member_number: '015738779653',
					typ: 'beMute'
				},{
					member_number: '015738779653',
					typ: 'outMeeting'
				},{
					member_number: '015738779653',
					typ: 'elseimg'
				}],
				tel: '',
				timer: '',
			};
		},
		created() {
			this.getList();
		},
		methods: {
			meetings(phone, type) {
				oprConferences({
					uuid: this.uuid,
					memberNum: phone,
					type: type
				}).then(response => {
					if(response.code == 200) {
						clearInterval(this.timer);
						this.getmeetingpro();
					}
				});
			},
			addperson() {
				if(this.personlist.length > 10) {
					this.$message('该功能仅支持10人以下会议!');
					return false;
				}
				joinConferences({
					uuid: this.uuid,
					phone: this.tel,
				}).then(response => {
					if(response.code == 200) {
						clearInterval(this.timer);
						this.getmeetingpro();
					}
				});
			},
			endmeet() {
				closeConferences({
					uuid: this.uuid,
				}).then(response => {
					if(response.code == 200) {
						this.dialogFormVisible = false;
						clearInterval(this.timer);
					}
				});
			},
			savemeet() {
				if(this.treesellist.length == 0) {
					this.$message('请选择会议成员');
					return false;
				} else if(this.treesellist.length > 10) {
					this.$message('该功能仅支持10人以下会议!');
					return false;
				}
				if(this.topic == '' || this.topic == undefined) {
					this.$message('请填写会议主题');
					return false;
				}
				const arrphone = [];
				for(var j = 0; j < this.treesellist.length; j++) {
					arrphone.push(this.treesellist[j].phone)
				}
				startConferences({
					topic: this.topic,
					description: '无',
					context: 'out',
					password: '123456',
					phoneList: arrphone
				}).then(response => {
					if(response.code == 200) {
						this.uuid = response.data.uuid;
						this.getmeetingpro();
					}
				});
			},
			getmeetingpro(){
				getConferencesMember({
					uuid: this.uuid,
				}).then(response => {
					if(response.code == 200) {
//						console.log(response.data)
						this.personlist = response.data;
						for(var i=0;i<this.personlist.length;i++){
							for(var j=0;j<this.treesellist.length;j++){
								if(this.personlist[i].member_number.length == 12){
									if(this.personlist[i].member_number.substring(1) == this.treesellist[j].phone){
										this.personlist[i].name = this.treesellist[j].name
									}
								}else if(this.personlist[i].member_number.length == 11 || this.personlist[i].member_number.length == 4){
									if(this.personlist[i].member_number == this.treesellist[j].phone){
										this.personlist[i].name = this.treesellist[j].name
									}
								}
								
							}
						}				
						this.dialogFormVisible = true;
						this.$nextTick(function() {			
							this.positions();
						});
						clearInterval(this.timer);
						this.timer = setTimeout(this.getmeetingpro, 1000);						
					}
				});
			},
			delperson(item){
				console.log(item,this.treesellist)
				var arr = [];
				this.treesellist.forEach(function (data){
					if(item.id == data.id){
						
					}else{
						arr.push(data)
					}
				})
				this.treesellist = arr;
				this.$refs.tree.setCheckedNodes(arr);
			},
			enter(e) {
				e.currentTarget.lastElementChild.style.display = 'block';
			},
			leave(e) {
				e.currentTarget.lastElementChild.style.display = 'none';
			},
			/** 查询登录日志列表 */
			getList() {
				getPersonTree().then(response => {
					for(var i = 0; i < response.data.length; i++) {
						if(response.data[i].isOrganization == 1) {
							response.data[i].disabled = true;
						}
					}
					this.treelist = response.data;
					getExtension({}).then(response => {
						console.log(response.data)					
						this.extensionlist = response.data;
						for(var i=0;i<this.extensionlist.length;i++){
							this.extensionlist[i].phone = this.extensionlist[i].nbr
						}
						this.treelist.push({
							name: '分机号',
							id: 0,
							disabled: true,
							children: this.extensionlist
						})
						console.log(this.treelist)
					});
				});
			},
			handleCheckChange(data, checked, indeterminate) {
				console.log(data, checked, indeterminate);
				const datalist = this.$refs.tree.getCheckedNodes();
				//      const arr = [];
				//      for(var i=0;i<datalist.length;i++){
				//      	if( datalist[i].isOrganization == 0){
				//      		arr.push(datalist[i])
				//      	}
				//      }
				this.treesellist = datalist;
			},
			//计算成员所在位置
			positions() {
				console.log(this.personlist.length)
				if(this.personlist.length > 7) {
					var kk = parseInt((this.personlist.length - 1) / 2);
					$('.meetingtable').css('width', kk * 110 + 150);
					for(var i = 0; i < this.personlist.length; i++) {
						//								console.log(kk,$('.participants')[i])
						$('.participants')[i].style.right = '';
						$('.participants')[i].style.left = '';
						if(i == kk) {
							$('.participants')[i].style.right = '-90px';
							$('.participants')[i].style.top = '30px';
						} else if(i > kk && i < this.personlist.length - 1) {
							$('.participants')[i].style.left = (75 + 130 * (i - (kk + 1))) + 'px';
							$('.participants')[i].style.top = '140px';
						} else if(i < kk) {
							$('.participants')[i].style.left = (75 + 130 * i) + 'px';
							$('.participants')[i].style.top = '-90px';
						} else if(i == this.personlist.length - 1) {
							$('.participants')[i].style.left = '-90px';
							$('.participants')[i].style.top = '30px';
						}
					}
				} else if(this.personlist.length >= 5 && this.personlist.length <= 7) {
					var kk = parseInt((this.personlist.length - 1) / 2);
					$('.meetingtable').css('width', kk * 110 + 150);
					for(var i = 0; i < this.personlist.length; i++) {
						//								console.log(kk,$('.participants')[i])
						$('.participants')[i].style.right = '';
						$('.participants')[i].style.left = '';
						if(i == kk) {
							$('.participants')[i].style.right = '-90px';
							$('.participants')[i].style.top = '30px';
						} else if(i > kk && i < this.personlist.length - 1) {
							$('.participants')[i].style.left = (75 + 130 * (i - (kk + 1))) + 'px';
							$('.participants')[i].style.top = '156px';
						} else if(i < kk) {
							$('.participants')[i].style.left = (75 + 130 * i) + 'px';
							$('.participants')[i].style.top = '-95px';
						} else if(i == this.personlist.length - 1) {
							$('.participants')[i].style.left = '-90px';
							$('.participants')[i].style.top = '30px';
						}
					}
				} else {
					var kk = parseInt((this.personlist.length - 1) / 2);
					for(var i = 0; i < this.personlist.length; i++) {
						//								console.log(kk)
						$('.participants')[i].style.right = '';
						$('.participants')[i].style.left = '';
						if(i == kk) {
							$('.participants')[i].style.right = '-70px';
							$('.participants')[i].style.top = '30px';
						} else if(i > kk && i < this.personlist.length - 1) {
							$('.participants')[i].style.left = (115 + 130 * (i - (kk + 1))) + 'px';
							$('.participants')[i].style.top = '110px';
						} else if(i < kk) {
							$('.participants')[i].style.left = (115 + 130 * i) + 'px';
							$('.participants')[i].style.top = '-95px';
						} else if(i == this.personlist.length - 1) {
							$('.participants')[i].style.left = '-90px';
							$('.participants')[i].style.top = '30px';
						}
					}
				}
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {

			},
		}
	};
</script>

<style>
	.meeting-container {
		background: #f5f7fa;
		padding: 10px 20px;
		height: 750px;
	}
	
	.meeting-container .listtitle {
		height: 45px;
		line-height: 45px;
		font-size: 19px;
		padding-left: 30px;
		background: #26b99a;
		color: #fff;
		margin-top: 0;
	}
	
	.meeting-container .leftbox {
		width: 30%;
		height: 100%;
		float: left;
	}
	
	.meeting-container .rightbox {
		width: 69%;
		height: 100%;
		float: right;
		border-radius: 4px;
		border: 1px solid #e6ebf5;
		background-color: #FFFFFF;
		padding: 10px 20px;
	}
	
	.meeting-container .el-tree {
		/*color: #fff!important;
		background: transparent!important;*/
		font-size: 18px;
	}
	
	.meeting-container .el-tree-node__content {
		font-size: 16px!important;
	}
	
	.meeting-container .el-tree-node__content:hover {
		background-color: transparent!important;
	}
	
	.meeting-container .el-tree,
	.filter-tree {
		height: 90%;
		overflow: auto;
	}
	
	.meeting-container .leftbox .el-checkbox {
		/*display: none;*/
	}
	
	.meeting-container .el-tree-node__content {
		height: 35px;
		font-size: 15px;
		background-color: transparent!important;
	}
	
	.meeting-container .el-tree-node.is-checked>.el-tree-node__content {
		background: #6bd5f5!important;
		color: #fff;
	}
	
	.meeting-container .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6bd5f5!important;
		border-color: #6bd5f5!important;
	}
	
	.meeting-container .time {
		font-size: 13px;
		color: #999;
	}
	
	.meeting-container .bottom {
		margin-top: 13px;
		line-height: 12px;
	}
	
	.meeting-container .button {
		padding: 0;
		float: right;
	}
	
	.meeting-container .image {
		width: 100%;
		display: block;
	}
	
	.meeting-container .clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.meeting-container .clearfix:after {
		clear: both
	}
	.meeting-container .el-dialog__body {
    height: 600px;
	}
</style>